<template>
<div>
    <el-menu :collapse-transition="false" :collapse="changestate" :style="{'background-color':changecolor}" :default-active="aaa" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" text-color="#fff" router active-text-color="#ECA89B">
        <el-menu-item index="/table">
            <i class="el-icon-setting"></i>
            <span slot="title">餐桌管理</span>
        </el-menu-item>

        <el-menu-item index="/commodity">
            <i class="el-icon-food"></i>
            <span slot="title">菜品管理</span>
        </el-menu-item>
        <el-menu-item index="/oder">
            <i class="el-icon-thumb"></i>
            <span slot="title">点菜管理</span>
        </el-menu-item>

        <el-menu-item index="/member">
            <i class="el-icon-user"></i>
            <span slot="title">会员管理</span>
        </el-menu-item>

        <el-menu-item index="/cashier">
            <i class="el-icon-monitor"></i>
            <span slot="title">收银管理</span>
        </el-menu-item>

        <el-menu-item index="/personnel">
            <i class="el-icon-plus"></i>
            <span slot="title">人员管理</span>
        </el-menu-item>
    </el-menu>
</div>
</template>

<script>
export default {
    name: "Mynav",
    data() {
        return {
            isCollapse: true,
        };
    },
    computed: {
        changecolor() {
            return this.$store.state.selectcolor.currentcolor;
        },
        changestate() {
            return this.$store.state.selectcolor.switchstate;
        },
        aaa() {
            // console.log(this.$route.path.length);
            // console.log(this.$route.path.substring(0, this.$route.path.length - 1));
            // return this.$route.path.substring(0, this.$route.path.length - 1);
            let b = this.$route.path;
            let c = [];
            for (let i = 0; i < b.length; i++) {
                if (b[i] === "/") {
                    c.push(i);
                }
            }
            if (c.length < 2) {
                return b;
            } else {
                return b.slice(c[0], c[1]);
            }
        },
    },
    created() {
        this.changestate;
    },
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
    },
};
</script>

<style>
.el-menu-vertical-demo {
    height: 100%;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
}

.el-menu {
    border-right: 0 !important;
}

.el-menu-item:hover {
    background: #838383 !important;
    color: #fff !important;
}

/* .el-submenu__title:hover {

  background: #1c88cf!important;

  color: #fff!important;

} */
.el-menu-item.is-active {
    background: gray !important;
    color: #fff !important;
}

/* .el-submenu__title.is-active {

  background: #1c88cf!important;

  color: #fff!important;

} */
</style>
